<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit" />
  <meta name="robots" content="index, follow" />
  <title>KELLY RIGHT ™</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="shortcut icon" href="skin/fonts/favicon.ico"/>
  <link rel="bookmark" href="skin/fonts/favicon.ico"/>
  <link rel="stylesheet" type="text/css" href="skin/css/font-awesome.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/bootstrap.min.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/owl.carousel.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/owl.theme.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/settings.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/style-red.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="skin/css/tk.css" media="screen" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" />
  <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.ie.css" /><![endif]-->
  <script type="text/javascript" src="skin/js/jquery.min.js"></script>
  <script type="text/javascript" src="skin/js/jquery.autocomplete.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
  <script src="skin/js/leaflet-providers.js"></script>
  <script type="text/javascript" src="skin/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="skin/js/template-web.js"></script>
  <script type="text/javascript" src="skin/js/owl.carousel.min.js"></script>
  <!-- 列表 -->
  <script type="text/html" id="lists">
    {{each listByMap v i}}
    <ul class="widget-list" id="liBoxes">
      <li class="li-item" data-item="{{v}}">
        <!-- 图 -->
        <div class="fg">
          <img src="{{v.photos[0]}}" class="pho" />

          <!-- 价格 -->
          <div class="prices">${{v.listPrice}}</div>
        </div>

        <!-- 详情 -->
        <div class="sn-wrapper">
          <!-- 名称 -->
          <p class="s-desc">{{v.address.full}}</p>

          <!-- 详情 -->
          <ul class="propertycard-attributes clearfix">
            {{if (v.property.bedrooms)}}
              <li>Beds {{v.property.bedrooms}}</li>
            {{/if}}

            {{if (v.property.bathsFull)}}
              <li class="bt">Baths {{v.property.bathsFull}}</li>
            {{/if}}

            {{if (v.property.lotSize)}}
              <li>{{v.property.area}} Sqft</li>
            {{/if}}
          </ul>

        </div>

        <!-- 名字 -->
        <div class="names">
          <!-- HARVEY KALLES REAL ESTATE LTD., BROKERAGE -->
        </div>

      </li>
    </ul>
    {{/each}}
  </script>

  <!-- 右侧--顶部--总数 -->
  <script type="text/html" id="totalshow">
    {{each totalarr v i}}
    <h3 class="title">{{v.total}} Results</h3>

    {{if (v.total >= 1)}}
    <h3 class="title tpa">Showing 1 - 20 of {{v.total}} Listings</h3>
    {{/if}}
    {{/each}}
  </script>

  <!-- 右侧--底部--总页数 -->
  <script type="text/html" id="totalnum">
    {{each totalarr v i}}
    <div class="row lin">

      <div class="col-md-6 lie prev isdisabled">
        <span class="m-left">Prev</span>
      </div>

      {{if (v.totalNum <= 1)}}
      <div class="col-md-6 lie next isdisabled">
        <span class="m-rig">Next</span>
      </div>
      {{else if (v.totalNum > 1)}}
      <div class="col-md-6 lie next">
        <span class="m-rig">Next</span>
      </div>
      {{/if}}

    </div>

    <div class="pt">Page <span class="currentPg">1</span> of <span class="totPg">{{v.totalNum}}</span></div>
    {{/each}}
  </script>

</head>

<body>
  <div id="container" class="map">
    <!-- 导航栏 -->
    <header class="clearfix" id="header-sec">
      <nav class="navbar navbar-default navbar-fixed-top pbox" role="navigation">

        <div class="container-fluid">

          <!-- 左 logo -->
          <div class="navbar-header">
            <!-- 移动端按钮 -->
            <a class="navbar-toggle collapsed mmenu-btn" href="#mmenu">
              <!-- <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span>  -->
              <img src="./skin/images/mobile-qttab.png" alt="">
            </a>

            <!-- pc -->
            <a class="navbar-brand hidden-xs hidden-sm hiddenMobEle" href="javascript:;">
              <img src="./skin/images/logo.png" alt="" class="logo" />
            </a>

            <!-- 移动 -->
            <a class="navbar-brand hidden-md hidden-lg hiddenPccEle" href="javascript:;">
              <img src="./skin/images/log-logo.png" alt="" class="logo" />
            </a>

          </div>

          <!-- tab -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-left" id="navigation1">
              <li class="Lev1">
                <a href="./index.html" class='menu1 active'>Homes for Sale </a>
              </li>

              <li class="Lev1">
                <a href="./aboutCharlotte.html" class='menu1'>About Charlotte</a>
              </li>

              <li class="Lev1">
                <a href="./contactUs.html" class='menu1'>Contact Us</a>
              </li>

              <!-- <li class="Lev1">
                    <a href="./openHouses.html" class="menu1">Open Houses</a>
                  </li> -->

              <!-- <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">New Developments</a>
                  </li>
    
                  <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">Buildings
                    </a>
    
                  </li>
    
                  <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">Find an Agent
                    </a>
    
                  </li>
    
                  <li class="Lev1">
                    <a href="javascript:void(0);" class="menu1">Blog
                    </a>
                  </li> -->
            </ul>

            <ul class="nav navbar-nav navbar-right" id="navigation2">

              <li class="Lev1">
                <a href="./sign-up.html" class="menu1 giwid">SIGN UP</a>
              </li>

              <li class="Lev1">
                <a href="javascript:void(0);" class="menu1 giwid activeLogin">LOG IN</a>
              </li>

              <li class="afterLogin" style="display: none">
                <a class="ele-a" href="#">
                  <!-- 注册时输入的用户名 -->
                  <span class="atext">username</span>
                  <div class="arr-down">
                    <img src="./skin/images/jiantouxia.png" alt="">
                  </div>
                </a>

                <!-- 用户相关 -->
                <ul class="aboutUser">
                  <li class="item">
                    <a href="./account-details.html" class="in">
                      <span class="">Account Details</span>
                    </a>
                  </li>

                  <li class="item" id="userFavourite">
                    <a href="./collection.html" class="in">
                      <span class="">Favorites</span>
                      <span class="favNum">0</span>
                    </a>
                  </li>

                  <li class="item">
                    <p class="signOut">Sign Out</p>
                  </li>
                </ul>

              </li>

            </ul>

          </div>

        </div>

      </nav>
    </header>

    <!-- sign in -->
    <div class="signin none">
      <div class="content">
        <!-- 关闭 -->
        <div class="closebtn"></div>

        <!-- logo -->
        <div class="dllogos">
          <div class="photo">
            <img src="./skin/images/log-logo.png" class="thepicture" alt="">
          </div>
        </div>

        <!-- 提示登录 -->
        <!-- <div class="tsinfo">Please login to your account before seeing the information. </div> -->

        <!-- 用户 -->
        <div class="userinfo login-normal" id="userInfo">
          <form action="">
            <!-- 导航 -->
            <div class="row navbares" id="signNav">

              <div class="col-xs-4 col-xs-offset-4 col-sm-2 col-sm-offset-7 up">
                <span>Sign Up</span>
              </div>

              <div class="col-xs-4 col-sm-2 log active">
                <span>Log In</span>
              </div>

            </div>

            <!-- sign up -->
            <div class="row usersignup">
              <!-- <div class="row free">
                  Create a FREE account to save searches and track your favourite homes. Already have an account? Click
                  the Log In tab.
                </div> -->

              <!-- 提示 -->
              <div class="row upalert" id="upginTips">You have signed up successfully, please log in to account.</div>

              <div class="row name">
                <div class="title">Name</div>
                <input type="text" placeholder="" name="" id="input_name1">
                <div class="ts">cannot be blank</div>
              </div>

              <div class="row email">
                <div class="title">Email</div>
                <input type="email" placeholder="" name="" id="input_email1">
                <div class="ts">please enter the correct email</div>
                <div class="exist">account already exists</div>
              </div>

              <div class="row password">
                <div class="title">Phone Number <span class="usedfor">(Used for Password)</span></div>
                <input type="text" placeholder="" name="" id="input_password1">
                <div class="ts">cannot be blank</div>
              </div>

              <!-- <div class="row confirm">
                  <div class="title">Confirm Password</div>
                  <input type="password" placeholder="" name="" id="input_confirm1">
                  <div class="ts">does not match password</div>
                </div> -->

              <!-- 确定 -->
              <div class="row upsubmit">
                <p class="tj active">Sign Up</p>
              </div>

              <div class="row confirm2">
                <!-- <input type="checkbox" name="" value="0" id=""> -->
                <div class="pictur active"></div>
                Get emailed when we find more properties that suit your tastes! We'll notify you daily of new listings
                &
                price changes.
              </div>

              <div class="row bottomTiS">
                By clicking continue or sign up, you agree to our linked <span class="hs">Terms of
                  Use</span> and <span class="hs">Privacy Policy</span>
              </div>
            </div>

            <!-- log in -->
            <div class="row usersignin">
              <!-- <div class="row tit">
                  <p>
                    Don't have an account? Click on the Sign Up tab.
                  </p>
                </div> -->

              <!-- 提示 -->
              <div class="row alert" id="loginTips">Invalid email or password.</div>

              <div class="row email">
                <div class="title">Email</div>
                <input type="email" name="" placeholder="" id="input_email">
                <div class="ts">Please enter the correct email</div>
              </div>

              <div class="row password">
                <div class="title">Phone Number <span class="usedfor">(Used for Password)</span></div>
                <input type="text" name="" placeholder="" id="input_password">
                <div class="ts">cannot be blank</div>
              </div>

              <div class="row loginsubmits">
                <p class="tj active">Log In</p>
              </div>

              <!-- 是否保持状态 忘记密码 -->
              <div class="row combine">
                <!-- 保持状态 -->
                <div class="col-xs-12 col-sm-6 rad">
                  <!-- <input type="checkbox" value="0" name="agree" id="check"> -->
                  <div class="pictur active"></div>
                  Stay logged in
                </div>

                <div class="col-xs-12 col-sm-6 access">
                  <p>
                    <a href="javascript: void(0);" id="forgetword">Can't access your account?</a>
                  </p>
                </div>

              </div>


            </div>

          </form>

        </div>

        <!-- 忘记密码 -->
        <div class="row findpassword login-find" style="display: none;">
          <div class="row tit">
            <p>
              Enter the email address you registered with and your password will be sent to you.
            </p>
          </div>

          <!-- 提示 -->
          <div class="row alert" id="findpaTips">Invalid email.</div>

          <div class="row email" id="emaFi">
            <div class="title">Email</div>
            <input type="email" name="" placeholder="" id="sendEmail">
            <div class="ts">Please enter the correct email.</div>
          </div>

          <div class="row send" id="sendPass">
            <p class="tj active">Send Password</p>
          </div>

          <div class="row back">
            <p>
              <a href="javascript: void(0);">Back to log in page</a>
            </p>
          </div>

        </div>

      </div>
    </div>

    <!-- 随机匹配时提示 -->
    <div class="randomMatching">
      <div class="container tobox">
        <div class="row">
          <div class="col-xs-12">
            <div class="bgfill">
              <div class="media">
                <div class="media-body">
                  Sorry, no current listings match your search. Here is a neighborhood you might be interested in.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 顶部所在区域 -->
    <div class="bearea clearfix" id="headBox">

      <!-- 位置 -->
      <div class="location hidden-xs hidden-sm">
        <label data-location="city">Spokane</label>
      </div>

      <!-- 右侧的 过滤和搜索 -->
      <div class="pull-right clearfix">
        <!-- 左 filter -->
        <div class="filter">
          Filters
          <div class="pic"></div>
        </div>

        <!-- 右 搜索 -->
        <div class="searchbox">
          <input type="text" class="sr theSeInput" name="country" id="srbtns" placeholder="Neighborhood, Address, School">
          <div class="rig searButton" id="sale-searchbtn">
            <i class="fa fa-search icon"></i>
          </div>
          <!-- 智能提示 -->
          <div id="suggestions-container" class="tsboxs"></div>
        </div>

      </div>

    </div>

    <!-- filter -->
    <div class="map-filter">
      <section>
        <form action="" class="forms">
          <div class="row" style="margin: 0;" id="filter-condition">

            <!-- Price from -->
            <div class="col-xs-6 pfrom columns" id="filter-type2">
              <div class="Price">
                <label class="control-label" for="property_search_list_price_from">Price from:</label>
                <div class="controls">
                  <select class="form-control" id="filter-type2-priceFrom">
                    <option value="">Any Min Price</option>
                    <option value="200000">$200,000</option>
                    <option value="250000">$250,000</option>
                    <option value="300000">$300,000</option>
                    <option value="350000">$350,000</option>
                    <option value="400000">$400,000</option>
                    <option value="450000">$450,000</option>
                    <option value="500000">$500,000</option>
                    <option value="550000">$550,000</option>
                    <option value="600000">$600,000</option>
                    <option value="650000">$650,000</option>
                    <option value="700000">$700,000</option>
                    <option value="750000">$750,000</option>
                    <option value="800000">$800,000</option>
                    <option value="850000">$850,000</option>
                    <option value="900000">$900,000</option>
                    <option value="950000">$950,000</option>
                    <option value="1000000">$1,000,000</option>
                    <option value="1100000">$1,100,000</option>
                    <option value="1200000">$1,200,000</option>
                    <option value="1300000">$1,300,000</option>
                    <option value="1500000">$1,500,000</option>
                    <option value="1750000">$1,750,000</option>
                    <option value="2000000">$2,000,000</option>
                    <option value="2500000">$2,500,000</option>
                    <option value="3000000">$3,000,000</option>
                    <option value="4000000">$4,000,000</option>
                    <option value="5000000">$5,000,000</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Price to -->
            <div class="col-xs-6 columns" id="filter-type3">
              <div class="form-group">
                <label class="" for="property_search_list_price_to">Price to:</label>
                <div class="controls">
                  <select class="form-control" id="filter-type3-priceTo">
                    <option value="">Any Max Price</option>
                    <option value="200000">$200,000</option>
                    <option value="250000">$250,000</option>
                    <option value="300000">$300,000</option>
                    <option value="350000">$350,000</option>
                    <option value="400000">$400,000</option>
                    <option value="450000">$450,000</option>
                    <option value="500000">$500,000</option>
                    <option value="550000">$550,000</option>
                    <option value="600000">$600,000</option>
                    <option value="650000">$650,000</option>
                    <option value="700000">$700,000</option>
                    <option value="750000">$750,000</option>
                    <option value="800000">$800,000</option>
                    <option value="850000">$850,000</option>
                    <option value="900000">$900,000</option>
                    <option value="950000">$950,000</option>
                    <option value="1000000">$1,000,000</option>
                    <option value="1100000">$1,100,000</option>
                    <option value="1200000">$1,200,000</option>
                    <option value="1300000">$1,300,000</option>
                    <option value="1500000">$1,500,000</option>
                    <option value="1750000">$1,750,000</option>
                    <option value="2000000">$2,000,000</option>
                    <option value="2500000">$2,500,000</option>
                    <option value="3000000">$3,000,000</option>
                    <option value="4000000">$4,000,000</option>
                    <option value="5000000">$5,000,000</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Bedrooms -->
            <div class="col-xs-6 columns" id="filter-type4">
              <div class="form-group">
                <label class="control-label" for="property_search_num_bedrooms">Bedrooms:</label>
                <div class="controls">
                  <select class="form-control" id="filter-type4-bedrooms">
                    <option value="">Any beds</option>
                    <option value="0">Studio</option>
                    <option value="1">1+ beds</option>
                    <option value="2">2+ beds</option>
                    <option value="3">3+ beds</option>
                    <option value="4">4+ beds</option>
                    <option value="5">5+ beds</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Bathrooms -->
            <div class="col-xs-6 columns" id="filter-type5">
              <div class="form-group">
                <label class="control-label" for="property_search_num_bathrooms">Bathrooms:</label>
                <div class="controls">
                  <select class="form-control" id="filter-type5-bathrooms">
                    <option value="">Any baths</option>
                    <option value="1">1+ baths</option>
                    <option value="2">2+ baths</option>
                    <option value="3">3+ baths</option>
                    <option value="4">4+ baths</option>
                    <option value="5">5+ baths</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Sq. Feet from -->
            <div class="col-xs-6 columns" id="filter-type6">
              <div class="form-group">
                <label class="" for="property_search_total_floor_area_from">Sq. Feet from:</label>
                <div class="controls">
                  <select class="form-control" id="filter-type6-sqFrom">
                    <option value="">Any Min SqFt</option>
                    <option value="500">500</option>
                    <option value="750">750</option>
                    <option value="1000">1,000</option>
                    <option value="1250">1,250</option>
                    <option value="1500">1,500</option>
                    <option value="1750">1,750</option>
                    <option value="2000">2,000</option>
                    <option value="2250">2,250</option>
                    <option value="2500">2,500</option>
                    <option value="2750">2,750</option>
                    <option value="3000">3,000</option>
                    <option value="3250">3,250</option>
                    <option value="3500">3,500</option>
                    <option value="4000">4,000</option>
                    <option value="4500">4,500</option>
                    <option value="5000">5,000</option>
                    <option value="6000">6,000</option>
                    <option value="7000">7,000</option>
                    <option value="8000">8,000</option>
                    <option value="9000">9,000</option>
                    <option value="10000">10,000</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Sq. Feet to -->
            <div class="col-xs-6 columns" id="filter-type7">
              <div class="form-group">
                <label class="" for="property_search_total_floor_area_to">Sq. Feet to:</label>
                <div class="controls">
                  <select class="form-control" id="filter-type7-sqTo">
                    <option value="">Any Max SqFt</option>
                    <option value="500">500</option>
                    <option value="750">750</option>
                    <option value="1000">1,000</option>
                    <option value="1250">1,250</option>
                    <option value="1500">1,500</option>
                    <option value="1750">1,750</option>
                    <option value="2000">2,000</option>
                    <option value="2250">2,250</option>
                    <option value="2500">2,500</option>
                    <option value="2750">2,750</option>
                    <option value="3000">3,000</option>
                    <option value="3250">3,250</option>
                    <option value="3500">3,500</option>
                    <option value="4000">4,000</option>
                    <option value="4500">4,500</option>
                    <option value="5000">5,000</option>
                    <option value="6000">6,000</option>
                    <option value="7000">7,000</option>
                    <option value="8000">8,000</option>
                    <option value="9000">9,000</option>
                    <option value="10000">10,000</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Year built from -->
            <div class="col-xs-6 columns" id="filter-type8">
              <div class="form-group">
                <label class="" for="property_search_year_built_from">Year built from</label>
                <div class="controls">
                  <select class="form-control" id="filter-type8-yearFrom">
                    <option value="">Any Min Year</option>
                    <option value="2019">2019</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                    <option value="2014">2014</option>
                    <option value="2013">2013</option>
                    <option value="2012">2012</option>
                    <option value="2011">2011</option>
                    <option value="2010">2010</option>
                    <option value="2005">2005</option>
                    <option value="2000">2000</option>
                    <option value="1995">1995</option>
                    <option value="1990">1990</option>
                    <option value="1980">1980</option>
                    <option value="1970">1970</option>
                    <option value="1960">1960</option>
                    <option value="1950">1950</option>
                    <option value="1900">1900</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Year built to -->
            <div class="col-xs-6 columns" id="filter-type9">
              <div class="form-group">
                <label class="" for="property_search_year_built_to">Year built to</label>
                <div class="controls">
                  <select class="form-control" id="filter-type9-yearTo">
                    <option value="">Any Max Year</option>
                    <option value="2019">2019</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                    <option value="2014">2014</option>
                    <option value="2013">2013</option>
                    <option value="2012">2012</option>
                    <option value="2011">2011</option>
                    <option value="2010">2010</option>
                    <option value="2005">2005</option>
                    <option value="2000">2000</option>
                    <option value="1995">1995</option>
                    <option value="1990">1990</option>
                    <option value="1980">1980</option>
                    <option value="1970">1970</option>
                    <option value="1960">1960</option>
                    <option value="1950">1950</option>
                    <option value="1900">1900</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- Keywords -->
            <!-- <div class="col-xs-12 Keywords columns" id="filter-type10">
              <div class="form-group">
                <label class="control-label" for="property_search_options">Keywords</label>
                <div class="inp">
                  <input class="" placeholder="ie: den" type="text" id="theinput">
                </div>
              </div>
            </div> -->

          </div>

          <!-- Only Open Houses -->
          <div class="row" id="filter-btn">
            <div class="col-xs-12 ">
              <div class="row">
                <div class="col-xs-12">

                  <div class="filtertoggle">
                    <label class="checkboxtoggle-label">
                      Only Open Houses
                      <div class="pull-right boxs">
                        <!-- 开关 -->
                        <div class="switches">
                          <div class="checkboxtoggle-button"></div>
                        </div>
                      </div>
                    </label>
                  </div>
                </div>

                <div class="col-xs-12 Results">
                  <div class="row">

                    <div class="col-xs-6 btncol">
                      <p id="filter-submit" class="btnss reset">Reset</p>
                    </div>

                    <div class="col-xs-6 btncol">
                      <p id="filter-submit" class="btnss btn2 dones">Done</p>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>

      </section>

    </div>

    <!-- 内容 -->
    <div class="page-container mainpage saleMain" id="innerpage-wrap">
      <div class="content">
        <div class="row">

          <div class="main col-xs-12 col-md-10 inner-left" role="main">
            <div id="map" style="height: 100%"></div>
          </div>

          <!-- 顶部侧边 -->
          <div class="hidden-xs hidden-sm sidebar inner-right" id="rightList" role="complementary">
            <section class="widget side-news">
              <!-- tab -->
              <div class="tabnavs clearfix">
                <div class="item map">
                  <img src="./skin/images/map-dingwei.png" class="pictu" alt="">
                  <span>Map View</span>
                </div>

                <div class="item list" id="viewBylist">
                  <img src="./skin/images/map-caidan.png" class="pictu" alt="">
                  <span>List View</span>
                </div>
              </div>

              <!-- 标题 -->
              <div id="totalListing"></div>

              <!-- sort -->
              <div class="sortes clearfix">
                <div class="txt">Sort by:</div>
                <div class="selelist">
                  <select name="" id="selectboxes">
                    <option value="0">Latest (Low to High)</option>
                    <option value="1">Latest (High to Low)</option>
                    <option value="2">Price (Low to High)</option>
                    <option value="3">Price (High to Low)</option>
                    <option value="4">Bd (Low to High)</option>
                    <option value="5">Bd (High to Low)</option>
                    <option value="6">Ba (Low to High)</option>
                    <option value="7">Ba (High to Low)</option>
                  </select>
                </div>

              </div>

              <!-- 列表 -->
              <div class="tabbed custom-tabbed">
                <div class="block current" id="rendering"> </div>
              </div>

              <!-- 分页 -->
              <div class="fenye" id="map-fy">
                <div id="bottomPg"></div>
              </div>

            </section>
          </div>

        </div>
      </div>
    </div>

    <!-- 底部 -->
    <!-- <div class="commonfoot">
      <div class="container  hidden-xs hidden-sm">

        <div class="row">

          <div class="col-md-4 col-lg-4  foot-contact rightbox">
            <div class="f-contact ltxt">
              <p> <a href="javascript:void(0);">© 2019 Real Estate Website by DotCom Agents</a></p>
              <p> <a href="javascript:void(0);">All rights reserved. Privacy and Terms</a></p>
            </div>
          </div>

          <div class="col-md-4 col-lg-4 foot-contact">
            <div class="f-contact">
              <ul class="box clearfix">
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom1.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom2.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom3.png" alt="" class="pic">
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="col-md-4 col-lg-4 foot-contact">
            <div class="f-contact rtxt">
              <p> <a href="./aboutCharlotte.html">ABOUT US</a></p>
              <p> <a href="./contactUs.html">CONTACT US</a></p>
            </div>
          </div>

        </div>

      </div>

      <div class="container hidden-md  hidden-lg">

        <div class="row">

          <div class="col-xs-12 col-sm-12 foot-contact">
            <div class="f-contact one">
              <ul class="about clearfix">
                <li><a href="./aboutCharlotte.html">ABOUT US</a></li>
                <li><a href="./contactUs.html">CONTACT US</a></li>
              </ul>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 foot-contact">
            <div class="f-contact two">
              <ul class="box clearfix">
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom1.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom2.png" alt="" class="pic">
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <img src="./skin/images/bottom3.png" alt="" class="pic">
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12  foot-contact">
            <div class="f-contact three">
              <p> <a href="javascript:void(0);">© 2019 Real Estate Website by DotCom Agents</a></p>
              <p> <a href="javascript:void(0);">All rights reserved. Privacy and Terms</a></p>
            </div>
          </div>
        </div>

      </div>
    </div> -->

    <!-- 返回顶部 -->
    <!-- <div class="commongoback" id="toTop">
      <div class="icon">
        <img src="./skin/images/up.png" />
      </div>
      top
    </div> -->

    <!-- 加载中 -->
    <div class="load">
      <div class="ing">
        <img src="./skin/images/jiazaizhong.gif" class="photo" alt="">
      </div>
    </div>

    <!-- 提示: 登录成功 -->
    <div class="success-logIn">
      <img class="pic" src="./skin/images/dui.png" alt="">
      <span class="txt">Logged in successfully.</span>
      <div class="close">
        <img src="./skin/images/guanbi.png" alt="">
      </div>
    </div>

    <!-- 提示: 退出成功 -->
    <div class="success-signOut">
      <img class="pic" src="./skin/images/dui.png" alt="">
      <span class="txt">Signed out successfully.</span>
      <div class="close">
        <img src="./skin/images/guanbi.png" alt="">
      </div>
    </div>

    <!-- 提示: 到邮箱找回密码 -->
    <div class="findmailbox">
      <img class="pic" src="./skin/images/dui.png" alt="">
      <span class="txt">You will receive an email with instructions about how to reset your password in a few
        minutes.</span>
      <div class="close">
        <img src="./skin/images/guanbi.png" alt="">
      </div>
    </div>

  </div>
  <script type="text/javascript" src="skin/js/jquery.migrate.js"></script>
  <!--<script type="text/javascript" src="skin/js/jquery.bxslider.min.js"></script>-->
  <script type="text/javascript" src="skin/js/jquery.imagesloaded.min.js"></script>
  <!-- <script type="text/javascript" src="skin/js/retina-1.1.0.min.js"></script> -->
  <script type="text/javascript" src="skin/js/jquery.themepunch.tools.min.js"></script>
  <script type="text/javascript" src="skin/js/jquery.themepunch.revolution.min.js"></script>
  <script type="text/javascript" src="skin/js/base64.min.js"></script>
  <script type="text/javascript" src="skin/js/base.js"></script>
  <script type="text/javascript" src="skin/js/axios.min.js"></script>
  <script type="text/javascript" src="skin/js/script.js"></script>

  <!-- 移动端导航 -->
  <nav id="mmenu" class="noDis">
    <div class="mmDiv">

      <!-- 关闭 -->
      <div class="closefixed closemenu">
        <img src="./skin/images/close_pic.png" alt="" style="width: 20px; height: 20px;">
      </div>

      <!-- sign log -->
      <div class="MMhead">
        <ul class="users clearfix">
          <!-- 登录前 -->
          <li class="before before1">
            <a href="./sign-up.html" class="noblock logins">Sign Up</a>
          </li>

          <li class="before">
            <a href="javascript:;" class="noblock activeLogin">Log In</a>
          </li>

          <!-- 登录后 -->
          <!-- Account Details -->
          <li class="afters afters1">
            <a href="./account-details.html" class="item account">
              <img src="./skin/images/log-ren.png" class="pic" alt="">
            </a>
          </li>

          <!-- Favourites -->
          <li class="afters">
            <a href="./collection.html" class="item account">
              <img src="./skin/images/log-aixin.png" class="pic" alt="">
              <span class="num" id="faNum">0</span>
            </a>
          </li>

        </ul>

      </div>


      <!-- nav -->
      <ul class="mobnavbar">
        <li class="box">
          <a href="./index.html">Homes for Sale</a>
        </li>

        <li class="box">
          <a href="./aboutCharlotte.html">About Charlotte</a>
        </li>

        <li class="box">
          <a href="./contactUs.html">Contact Us</a>
        </li>

        <!-- <li class="box">
            <a href="./openHouses.html" class="m-menu1">Open Houses</a>
          </li> -->

        <!-- <li class="box">
            <a href="javascript:;" class="m-menu1">New Developments</a>
          </li>
  
          <li class="box">
            <a href="" class="m-menu1">Buildings</a>
          </li>
  
          <li class="box">
            <a href="" class="m-menu1">Find an Agent</a>
          </li>
          
          <li class="box">
            <a href="" class="m-menu1">Find an Agent</a>
          </li>
  
          <li class="box">
            <a href="javascript:;" class="m-menu1">Blog</a>
          </li> -->
      </ul>

      <!-- sign out 登录后出现 -->
      <div class="footout">
        <a class="" href="javascript:;">Sign Out</a>
      </div>

    </div>
  </nav>

  <link type="text/css" rel="stylesheet" href="skin/css/jquery.mmenu.all.css" />
  <script type="text/javascript" src="skin/js/jquery.mmenu.all.min.js"></script>
  <script type="text/javascript">
    $(function ($) {
      var baseUrl = localStorage.getItem('baseUrl');
      var listByMap = [];

      // filters中
      var priceFrom = ''; // Price from
      var priceTo = ''; // Price to
      var bedrooms = ''; // Bedrooms
      var bathrooms = ''; // Bathrooms
      var sqFrom = ''; // Sq. Feet from
      var sqTo = ''; // Sq. Feet to
      var yearFrom = ''; // Year built from
      var yearTo = ''; // Year built to
      var keywords = ''; // keywords

      // 排序
      var sortvalue = 'listdate';
      var points = [];
      var getMapLimit = '20';

      // 分页
      var currPages = 1;
      var totalPages = 0;

      // 搜索
      var askKey = 'cities'; // 搜索
      var askVal = 'Spokane'; // 搜索词
      var fields = {};
      var cities = [];
      var counties = [];
      var neighborhoods = [];
      var ischange = true; // 找不到

      sessionStorage.removeItem('fromList');

      // 加载中
      function loading(m) {
        if (!m) {
          $('.load').show();
          setTimeout(() => {
            $('.load').hide();
          }, 1000)
        } else {
          $('.load').show();
          setTimeout(() => {
            $('.load').hide();
          }, m)
        }

      }

      // function
      function formatNum(str) {
        var str = typeof str == 'string' ? str : str + '';
        var newStr = "";
        var count = 0;
        // 当数字是整数
        if (str.indexOf(".") == -1) {
          for (var i = str.length - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
              newStr = str.charAt(i) + "," + newStr;
            } else {
              newStr = str.charAt(i) + newStr;
            }
            count++;
          }
          str = newStr; //自动补小数点后两位  + ".00"
          return str;
        }
        // 当数字带有小数
        else {
          for (var i = str.indexOf(".") - 1; i >= 0; i--) {
            if (count % 3 == 0 && count != 0) {
              newStr = str.charAt(i) + "," + newStr;
            } else {
              newStr = str.charAt(i) + newStr; //逐个字符相接起来
            }
            count++;
          }
          str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
          return str;
        }
      }

      // htmlEncode编码
      function htmlEncode(html) {
        //1.首先动态创建一个容器标签元素，如DIV
        var temp = document.createElement("div");
        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
        //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
        var output = temp.innerHTML;
        temp = null;
        return output;
      }
      
      // 获取参数
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      }

      var resek = getUrlParam('y');
      var resev = getUrlParam('u');

      if(resek) {
        askKey = resek;
        askVal = resev;
      }

      // 2 map
      var map = L.map("map", {
        center: [47.682716, -117.395203],
        zoom: 11,
        zoomControl: false
      });

      var defaultLayer = L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);


      // 在地图上绘图 
      var drawnItems = new L.FeatureGroup();
      map.addLayer(drawnItems);

      // 将相同的内容附加drawnItems FeatureGroup到Draw控件上
      var drawControl = new L.Control.Draw({
        draw: {
          circle: false,
          marker: false,
          polyline: false
        },
        edit: {
          featureGroup: drawnItems
        }
      });

      map.addControl(drawControl);

      // 调用Listing API
      var markers = [];
      var polygon = null;
      var numArr = [];
      // 事件 
      map.on('draw:created', function (e) {
        console.log('draw:created执行了')

        // 从上次运行中删除标记和多边形
        $.each(markers, function (i) {
          map.removeLayer(markers[i])
        });
        if (polygon != null) map.removeLayer(polygon);

        var latLngs = $.map(e.layer.getLatLngs(), function (o) {
          return o.lat + "," + o.lng
        });
        points = latLngs;

        var params81 = {
          [askKey]: htmlEncode(askVal),
          'sort': sortvalue,
          'limit': getMapLimit,
          'offset': '0',
          'minprice': priceFrom,
          'maxprice': priceTo,
          'minbeds': bedrooms,
          'maxbeds': '',
          'minbaths': bathrooms,
          'maxbaths': '',
          'minarea': sqFrom,
          'maxarea': sqTo,
          'minyear': yearFrom,
          'maxyear': yearTo,
          'points': points
        };

        // 获取列表
        getLocationList(params81, 1); // 地图

        // polygon = e.layer;
        // map.addLayer(e.layer);
      });

      // 2.2 请求列表
      function getLocationList(params, ispage) {
        console.log('-----获取列表传参-----', params);
        loading(3000);

        // 从上次运行中删除标记和多边形
        $.each(markers, function (i) {
          map.removeLayer(markers[i])
        });

        // 1.1 地图
        markers = [];
        
        // 标记
        $('.leaflet-marker-icon').css('display', 'none');


        if (polygon != null) map.removeLayer(polygon);

        axios.post(baseUrl + '/mclient/srts/properties', params, {
            headers: {
              'token': localStorage.getItem('token')
            }
          })

          .then(function (res) {

            if (res.data.code == 0 && res.data.msg == "success") {
              var data = res.data.results;
              console.log('-----获取列表成功-----', res.data);

              // 提示
              $('.map .randomMatching').hide();
              
              // 标记
              $.each(data, function (idx) {

                var markerLocation = new L.LatLng(data[idx].geo.lat, data[idx].geo.lng);
                var marker = new L.Marker(markerLocation); // 位置

                var listpri = formatNum(data[idx].listPrice);
        
                marker.bindPopup(
                  `
                  <a href='./saleDetail.html?id=${data[idx].mlsId}'>
                    <img src='${data[idx].photos[0]}' style='display: block; width: 100%; height: 100px; '/>
                    <div style="font-size: 14px; font-weight: 600; color: #212121;"> $${listpri}</div> 
                    <div style="font-size: 12px; color: #6B6B6B;">${data[idx].address.full}</div> 
                    <div style="font-size: 12px; color: #212121;">
                      <span>${data[idx].property.bedrooms}</span> bd
                      <span style="margin-left: 10px;">${data[idx].property.bathsFull}</span> ba
                      <span style="margin-left: 10px;">${data[idx].property.area}</span> sq
                    </div> 
                  </a>

                  `
                ).openPopup(); // 备注--点击显示

                map.addLayer(marker);
                markers.push(marker);

              });

              
              // 1.2 右侧列表
              listByMap = data; // 存储

              // 处理
              if (listByMap && listByMap.length) {
                listByMap.map((item, index, arr) => {
                  if (item.listPrice) {
                    item.listPrice = formatNum(item.listPrice);
                  }
                })
              }

              // 列表展示
              var htmls = template('lists', {
                listByMap: listByMap
              });
              $('#rendering').html(htmls);
             
             
              // 分页
              totalPages = Math.ceil(+res.data.resultsNum / 20);

              if (ispage) {
                var obj = {
                  total: res.data.resultsNum
                };
                var html2 = template('totalshow', {
                  totalarr: [obj]
                });
                $('#rightList #totalListing').html(html2);

                var ojs = {
                  totalNum: Math.ceil(res.data.resultsNum / 20)
                };
                var html3 = template('totalnum', {
                  totalarr: [ojs]
                });

                $('#rightList #map-fy #bottomPg').html(html3);
              } else {

              }
              
              // 随机展示
              if(askKey == 'q') {
                $('.map .randomMatching').show();
              } else {
                $('.map .randomMatching').hide();
              }

              // top
              $('#rightList').animate({
                scrollTop: 0
              }, 200)


            } else {
              console.log('-----获取列表报错-----', res);
            }

          })

          .catch(function (error) {
            console.log('-----获取列表失败-----', error);
          });


      };

      // 请求 -- 地图列表
      var params1 = {
        [askKey]: htmlEncode(askVal),
        'sort': sortvalue,
        'limit': getMapLimit,
        'offset': '0',
        'minprice': priceFrom,
        'maxprice': priceTo,
        'minbeds': bedrooms,
        'maxbeds': '',
        'minbaths': bathrooms,
        'maxbaths': '',
        'minarea': sqFrom,
        'maxarea': sqTo,
        'minyear': yearFrom,
        'maxyear': yearTo,
        'points': points
      };

      // 渲染列表
      getLocationList(params1, 1);

      // 2.2.3 分页
      // (1) 点击 -- 上1页
      $('#map-fy').on('click', '.prev', function () {

        // 1 数字
        var current = currPages;
        var reduce = 1;
        if (current <= 1) {
          reduce = 1;
          return;
        } else {
          reduce = current - 1;
        }

        currPages = reduce;
        $('#map-fy .pt .currentPg').text(reduce);

        (reduce <= 1) ? $('#map-fy .prev').addClass('isdisabled'): $('#map-fy .prev').removeClass('isdisabled');

        // 显示
        var params5 = {
          [askKey]: htmlEncode(askVal),
          'sort': sortvalue,
          'limit': getMapLimit,
          'offset': (currPages - 1) * 20 + '',
          'minprice': priceFrom,
          'maxprice': priceTo,
          'minbeds': bedrooms,
          'maxbeds': '',
          'minbaths': bathrooms,
          'maxbaths': '',
          'minarea': sqFrom,
          'maxarea': sqTo,
          'minyear': yearFrom,
          'maxyear': yearTo,
          'points': points
        };
        
        // 请求
        getLocationList(params5);

      })

      // (2) 点击 -- 下1页
      $('#map-fy').on('click', '.next', function () {

        // 1 数字
        var current = currPages;
        var add = 1;
        if (current >= totalPages) {
          add = totalPages;
          return;

        } else {
          add = current + 1;
        }

        currPages = add;
        $('#map-fy .pt .currentPg').text(add);

        (add > 1) ? $('#map-fy .prev').removeClass('isdisabled'): $('#map-fy .prev').addClass('isdisabled');

        // 显示
        var params6 = {
          [askKey]: htmlEncode(askVal),
          'sort': sortvalue,
          'limit': getMapLimit,
          'offset': (currPages - 1) * 20 + '',
          'minprice': priceFrom,
          'maxprice': priceTo,
          'minbeds': bedrooms,
          'maxbeds': '',
          'minbaths': bathrooms,
          'maxbaths': '',
          'minarea': sqFrom,
          'maxarea': sqTo,
          'minyear': yearFrom,
          'maxyear': yearTo,
          'points': points
        };

        getLocationList(params6);

      })


      // 3 点击 -- filter
      $('.map .bearea').on('click', '.filter', function () {
        $(this).toggleClass('active');
        $('.filter .pic').toggleClass('active');
        $('.map-filter').toggle();
      })

      // 3.1 点击 -- filter中 reset
      $('.map-filter').on('click', '.reset', function () {
        $('.map-filter #filter-type2 #filter-type2-priceFrom').val(''); // Price from
        $('.map-filter #filter-type3 #filter-type3-priceTo').val(''); // Price to
        $('.map-filter #filter-type4 #filter-type4-bedrooms').val(''); // Bedrooms
        $('.map-filter #filter-type5 #filter-type5-bathrooms').val(''); // Bathrooms
        $('.map-filter #filter-type6 #filter-type6-sqFrom').val(''); // Sq. Feet from
        $('.map-filter #filter-type7 #filter-type7-sqTo').val(''); // Sq. Feet to
        $('.map-filter #filter-type8 #filter-type8-yearFrom').val(''); // Year built from
        $('.map-filter #filter-type9 #filter-type9-yearTo').val(''); // Year built to
        $('.map-filter #filter-type10 #theinput').val(''); // keywords
        $('.map-filter #filter-btn .checkboxtoggle-button').removeClass('isactive');
      })

      // 3.2 点击 -- filter中 开关
      $('.map-filter #filter-btn').on('click', '.switches', function () {
        $(this).find('.checkboxtoggle-button').toggleClass('isactive');
      })

      // 3.3 点击 -- filter中 done
      $('.map-filter').on('click', '.dones', function () {
        // 3.3.1 关闭
        $('.map .bearea .filter').removeClass('active');
        $('.filter .pic').removeClass('active');
        $('.map-filter').hide();

        // 3.3.3 请求
        priceFrom = $('.map-filter #filter-type2 #filter-type2-priceFrom').val(); // Price from
        priceTo = $('.map-filter #filter-type3 #filter-type3-priceTo').val(); // Price to
        bedrooms = $('.map-filter #filter-type4 #filter-type4-bedrooms').val(); // Bedrooms
        bathrooms = $('.map-filter #filter-type5 #filter-type5-bathrooms').val(); // Bathrooms
        sqFrom = $('.map-filter #filter-type6 #filter-type6-sqFrom').val(); // Sq. Feet from
        sqTo = $('.map-filter #filter-type7 #filter-type7-sqTo').val(); // Sq. Feet to
        yearFrom = $('.map-filter #filter-type8 #filter-type8-yearFrom').val(); // Year built from
        yearTo = $('.map-filter #filter-type9 #filter-type9-yearTo').val(); // Year built to
        keywords = $('.map-filter #filter-type10 #theinput').val(); // keywords

        // 是否只看空房子 -- true false
        var OnlyOpenHouses = $('#filter-btn .checkboxtoggle-button').hasClass('isactive');

        var params21 = {
          [askKey]: htmlEncode(askVal),
          'sort': sortvalue, //排序
          'limit': getMapLimit,
          'offset': '0',
          'minprice': priceFrom,
          'maxprice': priceTo,
          'minbeds': bedrooms,
          'maxbeds': '',
          'minbaths': bathrooms,
          'maxbaths': '',
          'minarea': sqFrom,
          'maxarea': sqTo,
          'minyear': yearFrom,
          'maxyear': yearTo,
          'status': OnlyOpenHouses ? [' Active', 'Pending'] : [], // 只看空房子 ???
          // 'exteriorFeatures': [keywords] // 外部特征 ??
          'points': points
        };

        getLocationList(params21, 1);

      })

      // 5 点击 -- sort
      $('#rightList').on('change', '#selectboxes', function (e) {
        var svalue = $(this).val();

        if (svalue == 0) {
          sortvalue = 'listdate'; // 新升序

        } else if (svalue == 1) {
          sortvalue = '-listdate'; // 新降序

        } else if (svalue == 2) {
          sortvalue = 'listprice'; // 价格 升序

        } else if (svalue == 3) {
          sortvalue = '-listprice'; // 价格 降序

        } else if (svalue == 4) {
          sortvalue = 'beds'; // bd 升序

        } else if (svalue == 5) {
          sortvalue = '-beds'; // bd 降序

        } else if (svalue == 6) {
          sortvalue = 'baths'; // ba 升序

        } else if (svalue == 7) {
          sortvalue = '-baths'; // ba 降序
        }

        var params7 = {
          [askKey]: htmlEncode(askVal),
          'sort': sortvalue,
          'limit': '20',
          'offset': (currPages - 1) * 20 + '',
          'minprice': priceFrom,
          'maxprice': priceTo,
          'minbeds': bedrooms,
          'maxbeds': '',
          'minbaths': bathrooms,
          'maxbaths': '',
          'minarea': sqFrom,
          'maxarea': sqTo,
          'minyear': yearFrom,
          'maxyear': yearTo,
          'points': points
        };

        getLocationList(params7);
      })

      // 6 点击 -- 右侧每项
      $('.map #rendering').on('click', '.li-item', function (e) {
        var id = $(this).data().item.mlsId;
        // 跳转详情页
        window.location.href = `./saleDetail.html?id=${id}`;

      })
       
      // 6.2 鼠标悬停 -- 右侧每项
      $('.map #rendering').on('mouseover', '.li-item', function (e) {
        var item = $(this).data().item;
        var lat = item.geo.lat;
        var lng = item.geo.lng;

        var greenIcon = L.icon({
          iconUrl: './skin/images/map-dingwei.png',
          // shadowUrl: './skin/images/dingwei.png',
          iconSize:     [44, 44],  // 图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
          // shadowSize:   [0, 0], //  影子的大小    【值1，值2】 为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41
          iconAnchor:   [22, 44],  // 图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
          popupAnchor:  [-1, -76] // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
        });


        var marker = new L.Marker([lat, lng]); // 位置

        marker.bindPopup(
          `
          <a href='./saleDetail.html?id=${item.mlsId}'>
            <img src='${item.photos[0]}' style='display: block; width: 100%; height: 100px; '/>
            <div style="font-size: 14px; font-weight: 600; color: #212121;"> $${item.listPrice}</div> 
            <div style="font-size: 12px; color: #6B6B6B;">${item.address.full}</div> 
            <div style="font-size: 12px; color: #212121;">
              <span>${item.property.bedrooms}</span> bd
              
              <span style="margin-left: 10px;">${item.property.bathsFull}</span> ba
              
             
              <span style="margin-left: 10px;">${item.property.area}</span> sq
             
            </div> 
          </a>

          `
        ).openPopup(); // 备注--点击显示

        L.marker([lat, lng], {icon: greenIcon}).addTo(map);
        markers.push(marker);

      })
      
      // 移出
      $('.map #rendering').on('mouseout', '.li-item', function (e) {
        var item = $(this).data().item;
        var lat = item.geo.lat;
        var lng = item.geo.lng;

        var marker = new L.Marker([lat, lng]); // 位置

        marker.bindPopup(
          `
          <a href='./saleDetail.html?id=${item.mlsId}'>
            <img src='${item.photos[0]}' style='display: block; width: 100%; height: 100px; '/>
            <div style="font-size: 14px; font-weight: 600; color: #212121;"> $${item.listPrice}</div> 
            <div style="font-size: 12px; color: #6B6B6B;">${item.address.full}</div> 
            <div style="font-size: 12px; color: #212121;">
              <span>${item.property.bedrooms}</span> bd
              <span style="margin-left: 10px;">${item.property.bathsFull}</span> ba
              <span style="margin-left: 10px;">${item.property.lotSizeArea}</span> sq
            </div> 
          </a>

          `
        ).openPopup(); // 备注--点击显示

        map.addLayer(marker);
        markers.push(marker);
     
      })
       

      // 7 点击 -- 右侧 List View
      $('.map #rightList').on('click', '#viewBylist', function () {

        // 跳转列表页
        window.location.href = `./saleList.html?key=${askKey}&value=${askVal}`;
      })

      // 8 获取智能提示
      function getHelpList() {
        // 请求--获取数据
        axios.post(baseUrl + '/mclient/srts/basicAttri', {}, {
            headers: {
              'token': localStorage.getItem('token')
            }
          })

          .then(function (res) {

            if (res.data.code == 0 && res.data.msg == "success") {
              console.log('-----获取提示列表成功-----', res);

              // (2.1) 存储
              fields = res.data.results.fields;

              cities = res.data.results.fields.cities;
              counties = res.data.results.fields.counties;
              neighborhoods = res.data.results.fields.neighborhoods;


              var handCity = [];

              // (2.1.1) 处理 -- cities
              if (cities && cities.length) {
                cities.map((item, index, arr) => {
                  handCity.push({
                    value: (item + ' (city)'),
                    data: item
                  });
                })
              }

              // (2.1.2) 处理 -- counties
              if (counties && counties.length) {
                counties.map((item, index, arr) => {
                  handCity.push({
                    value: (item + ' (county)'),
                    data: item
                  });
                })
              }

              // (2.1.3) 处理 -- neighborhoods
              if (neighborhoods && neighborhoods.length) {
                neighborhoods.map((item, index, arr) => {
                  handCity.push({
                    value: (item + ' (neighbourhood)'),
                    data: item
                  });
                })
              }

              // 渲染
              var countries = handCity;

              $('#srbtns').autocomplete({
                lookup: countries,
                onSelect: function (res) {
                  var selectWords = res.value;
                  // askVal = res.value;

                  if (!String.prototype.contains) {
                    String.prototype.contains = function (arg) {
                      return !!~this.indexOf(arg);
                    };
                  }

                  // 去掉备注
                  if (selectWords.contains(' (city)')) {
                    askKey = 'cities';
                    selectWords = selectWords.replace(' (city)', '');

                  } else if (selectWords.contains(' (county)')) {
                    askKey = 'counties';
                    selectWords = selectWords.replace(' (county)', '');

                  } else if (selectWords.contains(' (neighbourhood)')) {
                    askKey = 'neighborhoods';
                    selectWords = selectWords.replace(' (neighbourhood)', '');
                  }


                  askVal = selectWords;


                  // 存储历史搜索词
                  localStorage.setItem('key', askKey);
                  localStorage.setItem('value', askVal);

                  // 请求 -- 地图列表
                  var params91 = {
                    [askKey]: htmlEncode(askVal),
                    'sort': sortvalue,
                    'limit': getMapLimit,
                    'offset': '0',
                    'minprice': priceFrom,
                    'maxprice': priceTo,
                    'minbeds': bedrooms,
                    'maxbeds': '',
                    'minbaths': bathrooms,
                    'maxbaths': '',
                    'minarea': sqFrom,
                    'maxarea': sqTo,
                    'minyear': yearFrom,
                    'maxyear': yearTo,
                    'points': points
                  };

                  getLocationList(params91, 1);

                }
              });


            } else {
              console.log('-----请求提示报错-----', res.data.msg);
            }

          })

          .catch(function (error) {
            console.log('-----请求提示失败-----', error);
          });

      };
      getHelpList();

      // 9 点击--顶部搜索按钮
      $('.map #headBox').on('click', '.searButton', function () {

        var svalue = $('.map #headBox .theSeInput').val();

        if (!svalue) {
          return;
        }

        if (cities && cities.length) {
          cities.map((item, index, arr) => {
            if (item == svalue) {
              askKey = 'cities';
              ischange = false;
            }
          })
        }

        if (counties && counties.length) {
          counties.map((item, index, arr) => {
            if (item == svalue) {
              askKey = 'counties';
              ischange = false;
            }
          })
        }

        if (neighborhoods && neighborhoods.length) {
          neighborhoods.map((item, index, arr) => {
            if (item == svalue) {
              askKey = 'neighborhoods';
              ischange = false;
            }
          })
        }

        // 随机显示一项
        if (ischange) {
          askKey = 'q';
        }

        // 存储历史搜索词
        localStorage.setItem('key', askKey);
        localStorage.setItem('value', svalue);

        // 加载中
        loading(2000);

        // 请求 -- 地图列表
        var params101 = {
          [askKey]: htmlEncode(svalue),
          'sort': sortvalue,
          'limit': getMapLimit,
          'offset': '0',
          'minprice': priceFrom,
          'maxprice': priceTo,
          'minbeds': bedrooms,
          'maxbeds': '',
          'minbaths': bathrooms,
          'maxbaths': '',
          'minarea': sqFrom,
          'maxarea': sqTo,
          'minyear': yearFrom,
          'maxyear': yearTo,
          'points': points
        };

        getLocationList(params101, 1);

      })
      $(".map #headBox .searchbox").on('keyup', '.theSeInput', function (e) {
        if (e.which === 13) {
          $(".map #headBox .searButton").click();
        }
      });


    });
  </script>
</body>

</html>